<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/wesite/view/common/base.jsp" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>选择优惠券</title>
    <%@ include file="/wesite/view/common/common.jsp" %>
    <script type="text/javascript" src="${webctx}/script/aui-tab.js"></script>
    <script type="text/javascript" src="${webctx}/script/aui-scroll.js"></script>
    <script src="${webctx}/script/aui-toast.js"></script>
</head>
<style>
    .my-coupon-item {
        display: none;
    }

    input, button, select, textarea {
        outline: none;
        -webkit-appearance: none;
        border-radius: 0;
    }

    .coupon-checkbox {
        position: absolute;
        right: .533333rem;
        top: 50%;
        margin-top: -.5333333rem;
        width: 1.0rem;
        height: 1.0rem;
        background: #fff;
        border: #dcdcdc 1px solid;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        display: inline-block;
        vertical-align: top;
        cursor: default;
        -webkit-appearance: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-transition: background-color ease 0.1s;
        transition: background-color ease 0.1s;
    }

    .my-coupon-item input:checked {
        background: url(${webctx}/images/ico-tick-white.png) center center no-repeat #ff6767;
        border: #ff6767 1px solid;
        background-size: 0.586667rem;
    }

    .coupon-list {
        margin-top: .533333rem;
        padding-bottom: 3.466666rem;
    }
</style>
<body>
<div class="discount-list" style="padding-top: 2.5rem;">
    <input type="hidden" name="code" value="${code}">
    <input type="hidden" name="orderbz" value="${orderbz}">
    <input type="hidden" name="paytype" value="${paytype}">
    <input type="hidden" name="ordermoney" value="${ordermoney}">


        <div class="head-tab" style="position: fixed; top: 0;left: 0; right: 0; z-index:20;">
            <div class="aui-tab" id="tab">
                <div class="aui-tab-item aui-active" st="1">可使用优惠券</div>
                <div class="aui-tab-item" st="2">不可使用优惠券</div>
            </div>
        </div>

    <div class="coupon-list">
        <!-- 可使用优惠券 -->
        <div class="my-coupon-item" st="1" style="display: block;">
            <ul>
                <c:forEach var="info" items="${list }">
                <c:if test="${info.min_money <= ordermoney }">
                    <li class="coupon">
                        <div class="coupon-price fl">￥<em class="offermoney"><fmt:formatNumber type="number" value=" ${info.offer_money}" pattern="0"/> </em></div>
                        <div class="coupon-text fl">
                            <p class="condition-txt">${info.name}</p>
                            <p class="condition-txt2">满${info.min_money}可使用</p>
                            <p class="condition-time">有效期：<fmt:formatDate value="${ info.startdate}"
                                                                          pattern="yyyy/MM/dd HH:mm"/> - <fmt:formatDate
                                    value="${ info.enddate}" pattern="yyyy/MM/dd HH:mm"/></p>
                        </div>
                        <input class="coupon-checkbox" type="radio" name="discount" value="${info.id}">
                        <div class="cl"></div>
                    </li>
                </c:if>
                </c:forEach>
            </ul>
            <div class="coupon-btn">
                <a href="javascript:;" onclick="selectCoupon()">确定</a>
            </div>
        </div>
        <!-- 不可使用优惠券 -->
        <div class="my-coupon-item" st="2">
            <ul>
                <c:forEach var="info" items="${list }">
                <c:if test="${info.min_money > ordermoney }">
                    <li>
                        <div class="coupon-price fl">￥<em><fmt:formatNumber type="number" value="${info.offer_money}"  pattern="0"/></em></div>
                        <div class="coupon-text fl">
                            <p class="condition-txt">${info.name}</p>
                            <p class="condition-txt2">满${info.min_money}可使用</p>
                            <p class="condition-time">有效期：<fmt:formatDate value="${ info.startdate}"
                                                                          pattern="yyyy/MM/dd HH:mm"/> - <fmt:formatDate
                                    value="${ info.enddate}" pattern="yyyy/MM/dd HH:mm"/></p>
                        </div>
                        <div class="cl"></div>
                    </li>
                </c:if>
                </c:forEach>
            </ul>
        </div>
    </div>



</div>
<script>
    var tab = new auiTab({
        element: document.getElementById("tab"),
    }, function (ret) {
        var index = ret.index;
        var tabItem = $(".my-coupon-item[st='" + index + "']");
        tabItem.show().siblings().hide();
    });
    function selectCoupon() {
        var toast = new auiToast({
        });
        var checked = $("input[name='discount']:checked");
        var couponId = 0;
        var offerMoney = 0;
        if (checked.length == 0){
            toast.fail({
                title:"请选择优惠券",
                duration:1000
            })
            return false;
        }

        if (checked.length == 1) {
            couponId = checked.val();
            offerMoney = checked.parents(".coupon").find(".offermoney").text();
        }
        $w.httpRequest({
            url: "${ctx}/we/coupon/" + $("[name='code']").val(),
            method: "post",
            data: {
                "_method": "put",
                "couponId": couponId,
                "offerMoney": offerMoney,
                "bz": $("[name='orderbz']").val(),
                "paytype": $("[name='paytype']").val()
            },
            ok: function (ret) {
                window.location.href = ret.Data;
            }
        })
    }
    apiready = function () {
        api.parseTapmode();
    }

</script>
</body>
</html>
